跳到主要内容

webpack资源处理 - loader

引入loader，创建css文件​

现在，我们要引入一个css文件，我们的方法是在html中来编写style标签，或者引入一个css文件，但是我们要用的webpack打包，所以我们的css文件要通过资源文件去。

在webpack中要处理资源文件，我们要使用webpack的loader，对于css文件，我们要使用css-loader和style-loader。这是一个npm包，我们要安装。

npm install style-loader css-loader --save-dev

然后我们在src目录下创建了index.css

src/index.css

+ div {
+    color: red;
+ }

配置文件配置​

在之前的基础配置上，我们加入了module的配置项。module配置是来配置我们如何处理一些模块的。在module中有很多配置，在这里对于文件的处理方式，我们用到的是module/rules，rules提供的是一个数组，其中提供了多个rule对象。

对于rule属性,分为条件，结果和嵌套规则

条件​

条件可以使用test，include，exclude，resource等等，其中test用来断言一个模块符合某一个正则规则。其中有些属性具有优先级和排斥等，比如使用了test这个属性，resource就会被忽略等等。那么这些规则的详细用法就可以到webpack的配置文档中查看。

结果在webpack配置文档中的Rule下面有说明到，规则有loader和parse两种选项，loader,option,use这些属性会影响loader，query，loaders会影响parse等等。

嵌套规则用来对条件匹配时的进一步处理，这里不做详细说明。

那么下面的配置中，使用了test属性来断言一个目标，通过use属性来影响loader的结果，那么匹配到.css后缀的文件之后就会使用loader来进行解析。这里提供了2个loader，那么根据webpack，会进行一个链式的处理，也就是前面的loader处理后会将结果返回给后面的loader调用，直到处理出最后的js结果。

 const path = require("path");

 module.exports = {
   entry: "./src/index.js",
   output: {
     filename: "main.js",
     path: path.resolve(__dirname, "dist"),
   },
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: ["style-loader", "css-loader"],
+      },
+    ],
+  },
};

引入css到js中​

如果你写过vue或者react，我们会发现，引入一些外部的css库都会将样式引入到main.js那个文件中，而不是通过一些规则来指定css的路径从而引入等。这是因为webpack是通过模块的调用来构建一个依赖图的，它会把import这些来解析，结合import后面的路径以及loader来对资源进行处理，所以到目前为止，我们进行的css打包的结果实际上被处理成了一个js文件，当然我们是有办法让它直接被处理成.css文件，不打包成js文件的。经过webpack的学习，慢慢的就会学会这种处理。

import _ from "lodash";
+ import "./index.css";

function component() {
  const element = document.createElement("div");

  element.innerHTML = _.join(["Hello", "webpack"], " ");

  return element;
}

document.body.appendChild(component());

那么现在我们引入了index.css到main.js中，然后执行npm run build，输出结果和之前发生了变化，其中输出了一些关于index.css的信息。

打开dist/main.js，我们发现了我们的index.css文件中的样式，被打包到了main.js中以普通字符串的形式存在，在后面的加载中它会被以js的形式来加载到浏览器中。

最后我们打开index.html，发现div中的字体颜色变成了我们设置的red红色。这样，我们最基本的webpack打包css资源就成功了。

打包其它静态资源​

对于资源的管理，除了css，我们还有image，font这些静态文件。

例如我们要处理一个图片文件。那么下面的配置中我们新增了一个断言，来判断各种图片格式，而下面使用的不是loader，而是type，这是webpack内置的资源模块，下面使用的是在webpack5中新增的资源类型，其中详细的到webpack资源模块文档中查看。webpack资源模块

那么对于asset/resource的类型，在被webpack解析到的时候，会产生一个文件，并且这个资源会被一个生成的名称来替换。（在webpack4中就可以用file-loader来实现。）这也就是为什么我们在浏览器中，看到一些图片的名称等都是一个比较随机的命名，webpack帮我们打包后生成的文件名字。

const path = require("path");

module.exports = {
  entry: "/src/index.js",
  output: {
    filename: "main.js",
    path: path.resolve(__dirname, "dist"),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
+      {
+        test: /\.(png|svg|jpg|jpeg|gif)$/,
+        type: "asset/resource",
+      },
+    ],
+  },
};

那么对于其它文件，比如font字体，我们也可以用asset/resource等类型，和image相同的原理来进行配置。当然不止有使用asset/resource来进行处理的文件，还有其它文件根据实际情况来进行替换。

除此之外，我们可以处理一些tsx，vue等模板，依赖babel loader就可以做到。